<template>
    <van-tabs v-model:active="active" animated>
        <van-tab title="全部">
             <div style="justify-content: space-between;align-items: center;display: flex;">
                <p>2024-06-18 15:04:26 9分30秒</p>
                <p style="color: chocolate;">待付款</p>
             </div>
             <van-card
                num="3"
                price="￥20.10"
                title="华为Mate60Pro"
                thumb=""
                >
                <template #thumb>
                   <img style="width: 10rem;height: 10rem;" src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="">
                   
                   
                </template>
                <template #footer>
                    <van-button size="mini">取消订单</van-button>
                    <van-button size="mini" @click="aa()">立即支付</van-button>
                </template>
             </van-card>
        </van-tab>
        <van-tab title="待付款">内容 2</van-tab>
        <van-tab title="待发货">内容 3</van-tab>
        <van-tab title="待收货">内容 4</van-tab>
        <van-tab title="已完成">内容 4</van-tab>
        <van-tab title="已取消">内容 4</van-tab>
    </van-tabs>


</template>

<script setup>
import { ref } from 'vue';
const active = ref(0);
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const aa=()=>{
    router.push('/login')
}

</script>

<style lang="scss" scoped></style>